<template>
  <div>
    <AddOrEditDialog
      ref="addOrEditDialogRef"
      title="项目"
      :dialogWidth="dialogWidth"
      :formHeader="formHeader"
      :form="form"
      :action="action"
      :url="$urls.API_URL_BACKSTAGE_SCHOOL_PROJECT"
    >
      <template #management>
        <Autocomplete
          v-model="state"
          :url="proxy.$urls.API_URL_BACKSTAGE_USER_MANAGE"
          :valueName="'nickName'"
          @handleSelect="handleSelect"
        />
      </template>
    </AddOrEditDialog>
  </div>
</template>

<script lang="ts" setup>
import AddOrEditDialog from '@/components/base/table/form/AddOrEditDialog.vue';
import Autocomplete from '@/components/base/dialog/Autocomplete.vue';
import {
  defineExpose, defineProps, getCurrentInstance, ref, withDefaults,
} from 'vue';
import { FormHeader } from '@/types/interface/base_interface';
import { Project } from '@/types/interface/projet_interface';

// 接收父容器参数
interface Props {
  action?: string, // 表单的处理类型，post表示提交，put表示编辑
}
const props = withDefaults(defineProps<Props>(), {
  action: 'post',
});

const { proxy } = getCurrentInstance();

// 表单元素
const formHeader = ref<FormHeader[]>([
  {
    label: '项目名称',
    prop: 'name',
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
      {
        min: 2,
        max: 10,
        message: '长度在 2 到 10个字符',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '项目描述',
    prop: 'description',
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '项目经理',
    prop: 'management',
    type: 'custom',
  },
  {
    label: '项目开始时间',
    prop: 'beginTime',
    type: 'date',
    dateType: 'x',
  },
  {
    label: '项目结束时间',
    prop: 'endTime',
    type: 'date',
    dateType: 'x',
  },
]);
const dialogWidth = ref('800px');
interface RestaurantItem {
  id: number
  value: string
}
// 表单对象
const state = ref();
const form = ref<Project>();
// 在点击选中建议，也就是点击从后端获取到的数据后，完成相对应的事件，例如查询某条数据（通常用于修改表单绑定值）
const handleSelect = (item: RestaurantItem) => {
  form.value!.management = item.id; // 将选中的id赋值给要传递后台的form表单
};
let formInit:Project; // 记录表单第一次传入的值,用于表单重置恢复初始值使用
// 打开对话框，gong供父组件调用，传入表单对象
const addOrEditDialogRef = ref();
const openDialog = (project:Project, action:string) => {
  formInit = { ...project }; // 获取初始值，这里要做深拷贝，避免与form对象引用的地址一致，导致无法恢复初始值
  form.value = { ...project };
  if (action === 'post') {
    state.value = '';
  } else if (action === 'put') {
    state.value = form.value.managementUser.nickName;
  }
  addOrEditDialogRef.value!.openDialog();
};

// 提交表单成功后的钩子函数
const afterSubmitSuccess = () => {
  // 让表单恢复为传入对象时的初始值，注意要深度拷贝，避免初始值收到污染
  form.value = { ...formInit };
};
// 暴露组件给父容器使用
defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
